<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>
    <link rel="shortcut icon" href="favicon.ico"> <link href="css/bootstrap.min.css?v=3.3.7" rel="stylesheet">
    <link href="css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="css/animate.css" rel="stylesheet">
    <link href="css/style.css?v=4.1.0" rel="stylesheet">
    <script>if(window.top !== window.self){ window.top.location = window.location;}</script>

    <script>
        $(document).ready(function (){
            $("#sbmt").click(function (){
                /*
                 根据name获取控件的值
                 const：该变量不需要改变
                 */
                const username = $("#username").val()
                // 根据id获取控件的值（推荐）
                const password = $("#password").val()
                let ok = true
                if(username.trim() === ""){
                    $("#uname_warn").text("请输入用户名！")
                    ok = false
                }else{
                    $("#uname_warn").text("")
                }
                if(password.trim() === ""){
                    $("#pwd_warn").text("请输入密码！")
                    ok = false
                }else{
                    $("#pwd_warn").text("")
                }
                if(ok){
                    //通过jq让表单提交，因为上传文件，需要将数据封装到FormData对象中
                    var formData = new FormData();
                    console.log("head:",$("#head")[0].files[0])
                    formData.append("head",$("#head")[0].files[0])
                    formData.append("username",username)
                    formData.append("password",password)

                    $.ajax({
                        url:'/reg', /*接口域名地址*/
                        type:'post',
                        data: formData,
                        contentType: false,
                        processData: false,
                        dataType:'json',//自动将服务器返回数据转成json类型
                        success:function(res){
                            if(res.code == 0){
                                location.href="login.html"
                            }else{
                                $("#msg").text(res.msg)

                            }
                        },
                        error:function (XMLHttpRequest, textStatus, errorThrown) {
                            alert(XMLHttpRequest);
                            alert(textStatus);
                            alert(errorThrown);
                        }
                    })
                }
            })
        })

    </script>
</head>
<body>
</div>
<form class="m-t" role="form" action="login.html">
    <div class="form-group">
        <input type="text" class="form-control" placeholder="请输入用户名" required="",id="username",maxlength="8">
    </div>
    <h1>注册页面</h1>
        <label for="username">登录名：</label>
        <input type="text" name="username" id="username" maxlength="8" >
        <span id="uname_warn" class="warn"></span>
        <br>
        <label for="password">密码：</label>
        <input type="password" name="password" id="password" maxlength="8">
        <span id="pwd_warn" class="warn"></span>
        <br>
        上传头像：<input type="file" name="head" id="head">
        <br>
        <input type="button" value="提交" id="sbmt">
        <input type="reset" >
        <div id="msg" class="warn"></div>
</body>
</html>